<template>
  <div class="container">
    <el-tabs>
      <el-tab-pane label="医生用户">
        <div class="dist-area">
          <v-distpicker
            hide-area
            :province="searchParamsDoc.province"
            :city="searchParamsDoc.city"
            @province="onChangeProvinceDoc"
            @city="onChangeCityDoc"
          />
        </div>
        <el-input v-model="searchParamsDoc.userId" style="width: 200px" placeholder="键入用户id" />
        <el-input v-model="searchParamsDoc.userName" style="width: 200px" placeholder="键入用户姓名" />
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="doSearch('doc')"
        >检索</el-button>
        <keep-alive>
          <el-table v-loading="tableCtl.docLoad" :data="pageList.doctorList">
            <el-table-column align="center" label="id" width="80" prop="user.id" />
            <el-table-column label="接入时间">
              <template slot-scope="{ row }">
                <div>{{ row.user.gmtCreate | dateFormat }}</div>
              </template>
            </el-table-column>
            <el-table-column label="用户id" prop="user.userId" />
            <el-table-column label="用户姓名" prop="user.userName" />
            <el-table-column label="用户电话" prop="user.userPhone" />
            <el-table-column label="用户位置">
              <template slot-scope="{ row }">
                <span>{{ getLocation(row.user.userLocation).province }}</span>
                <span>{{ getLocation(row.user.userLocation).city }}</span>
              </template>
            </el-table-column>
            <el-table-column label="用户描述" prop="user.userDisctiption" />
            <el-table-column label="关联设备">
              <template slot-scope="{ row }">
                <el-button
                  type="primary"
                  size="mini"
                  @click="onShowDialog(row.equipList)"
                >查看设备信息</el-button>
              </template>
            </el-table-column>
          </el-table>
        </keep-alive>
        <el-pagination
          :page-sizes="[10, 15, 20, 25]"
          :page-size="paginationDoc.size"
          :current-page.sync="paginationDoc.index"
          :total="paginationDoc.total"
          layout="sizes, prev, pager, next"
          @size-change="handlerPageSizeChangeDoc"
          @current-change="handlerPageIndexChangeDoc"
        />
      </el-tab-pane>
      <el-tab-pane label="普通用户">
        <div class="dist-area">
          <v-distpicker
            hide-area
            :province="searchParamsUser.province"
            :city="searchParamsUser.city"
            @province="onChangeProvinceUser"
            @city="onChangeCityUser"
          />
        </div>
        <el-input v-model="searchParamsUser.userId" style="width: 200px" placeholder="键入用户id" />
        <el-input v-model="searchParamsUser.userName" style="width: 200px" placeholder="键入用户姓名" />
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="doSearch('user')"
        >检索</el-button>
        <keep-alive>
          <el-table v-loading="tableCtl.userLoad" :data="pageList.patientList">
            <el-table-column align="center" label="id" width="80" prop="user.id" />
            <el-table-column label="接入时间">
              <template slot-scope="{row}">
                <span>{{ row.user.gmtCreate | dateFormat }}</span>
              </template>
            </el-table-column>
            <el-table-column label="用户id" prop="user.userId" />
            <el-table-column label="用户姓名" prop="user.userName" />
            <el-table-column label="用户电话" prop="user.userPhone" />
            <el-table-column label="用户位置">
              <template slot-scope="{row}">
                <span>
                  {{ getLocation(row.user.userLocation).province }}
                </span>
                <span>
                  {{ getLocation(row.user.userLocation).city }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="用户描述" prop="user.userDiscription" />
            <el-table-column label="关联设备">
              <template slot-scope="{ row }">
                <el-button
                  type="primary"
                  size="mini"
                  @click="onShowDialog(row.equipList)"
                >查看设备信息</el-button>
              </template>
            </el-table-column>
          </el-table>
        </keep-alive>
        <el-pagination
          :page-sizes="[10, 15, 20, 25]"
          :page-size="paginationUser.size"
          :current-page.sync="paginationUser.index"
          :total="paginationUser.total"
          layout="sizes, prev, pager, next"
          @size-change="handlerPageSizeChangeUser"
          @current-change="handlerPageIndexChangeUser"
        />
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      :visible.sync="dialogCtr.show"
      title="关联设备"
      width="500px"
      style="padding: 20px"
    >
      <simTable :header="dialogCtr.header" :data="dialogCtr.data">
        <el-table-column label="关联状态">
          <template slot-scope="{row}">
            <span v-if="row.sign.patientConfirm === 'agree' && row.sign.doctorConfirm === 'agree'">
              <el-tag type="success">已关联</el-tag>
            </span>
            <span v-else-if="row.sign.patientConfirm === 'agree'">
              <el-tag type="warning">医生未确认</el-tag>
            </span>
            <span v-else-if="row.sign.doctorConfirm === 'agree'">
              <el-tag type="warning">患者未确认</el-tag>
            </span>
          </template>
        </el-table-column>
      </simTable>
    </el-dialog>
  </div>
</template>

<script>
import { req } from '@/api/customUser'
import { getLocation } from '@/utils/loc'
import SimTable from '@/views/table'
export default {
  components: {
    SimTable
  },
  data() {
    return {
      searchParamsDoc: {
        userType: 'DOCTOR',
        userId: null,
        userName: null,
        province: null,
        city: null,
        pageSize: 10,
        pageIndex: 1
      },
      searchParamsUser: {
        userType: 'PATIENT',
        userId: null,
        userName: null,
        province: null,
        city: null,
        pageSize: 10,
        pageIndex: 1
      },
      pageList: {
        patientList: null,
        doctorList: null
      },
      dialogCtr: {
        data: null,
        show: false,
        title: '设备详情',
        header: [
          {
            label: 'id',
            prop: 'equip.id'
          },
          {
            label: '设备id',
            prop: 'equip.equipId'
          },
          {
            label: '设备用户名',
            prop: 'equip.equipUserName'
          },
          {
            label: '设备用户身份证',
            prop: 'equip.equipUserIdentify'
          },
          {
            label: '设备用户性别',
            prop: 'equip.equipUserSex'
          }
        ]
      },
      paginationDoc: {
        size: 10,
        index: 1,
        total: 0
      },
      paginationUser: {
        size: 10,
        index: 1,
        total: 0
      },
      tableCtl: {
        userLoad: false,
        docLoad: false
      }
    }
  },

  created() {
    this.handlerSearch('user')
    this.handlerSearch('doc')
  },
  methods: {
    userUp() {
      this.tableCtl.userLoad = true
    },
    userDown() {
      this.tableCtl.userLoad = false
    },
    docUp() {
      this.tableCtl.docLoad = true
    },
    docDown() {
      this.tableCtl.docLoad = false
    },
    onChangeProvinceDoc(data) {
      this.searchParamsDoc.province = data.value === '省' ? null : data.value
    },
    onChangeCityDoc(data) {
      this.searchParamsDoc.city = data.value === '市' ? null : data.value
    },
    onChangeProvinceUser(data) {
      this.searchParamsUser.province = data.value === '省' ? null : data.value
    },
    onChangeCityUser(data) {
      this.searchParamsUser.city = data.value === '市' ? null : data.value
    },
    handlerPageSizeChangeDoc(e) {
      this.paginationDoc.size = e
      this.paginationDoc.index = 1
      this.searchParamsDoc.pageSize = e
      this.searchParamsDoc.pageIndex = 1
      this.paginationDoc.total = 0
      this.handlerSearch('doc')
    },
    handlerPageIndexChangeDoc(e) {
      this.paginationDoc.index = e
      this.searchParamsDoc.pageIndex = e
      this.handlerSearch('doc')
    },
    handlerPageSizeChangeUser(e) {
      this.paginationUser.size = e
      this.paginationUser.index = 1
      this.searchParamsUser.pageSize = e
      this.searchParamsUser.pageIndex = 1
      this.paginationUser.total = 0
      this.handlerSearch('user')
    },
    handlerPageIndexChangeUser(e) {
      this.paginationUser.index = e
      this.searchParamsUser.pageIndex = e
      this.handlerSearch('user')
    },
    doSearch(type) {
      if (type === 'user') {
        if (this.searchParamsUser.userId === '') {
          this.searchParamsUser.userId = null
        }
        if (this.searchParamsUser.userName === '') {
          this.searchParamsUser.userName = null
        }
      } else {
        if (this.searchParamsDoc.userId === '') {
          this.searchParamsDoc.userId = null
        }
        if (this.searchParamsDoc.userName === '') {
          this.searchParamsDoc.userName = null
        }
      }
      this.handlerSearch(type)
    },
    handlerSearch(type) {
      if (type === 'user') {
        this.userUp()
        req(this.searchParamsUser).then(
          response => {
            this.pageList.patientList = response.object.obj
            this.paginationUser.total = response.object.pageTotal
            this.userDown()
          }
        )
      } else {
        this.docUp()
        req(this.searchParamsDoc).then(
          response => {
            this.pageList.doctorList = response.object.obj
            this.paginationDoc.total = response.object.pageTotal
            this.docDown()
          }
        )
      }
    },
    getLocation(data) {
      return getLocation(data)
    },
    onShowDialog(showDetail) {
      console.log('data', showDetail)
      this.dialogCtr.data = showDetail
      this.dialogCtr.show = true
    },
    doReq() {
      req(this.searchParams).then((response) => {
        console.log(response.object)
      })
    }
  }
}
</script>

<style lang="scss">
@import '@/styles/custom.scss';

.container {
  padding: 20px;
}
</style>
